<template>
	<!--编辑合同信息 -->
	<a-modal v-bind="option">
		<a-form ref="form" :model="formData" layout="vertical">
			<a-row :gutter="12">
				<a-col :span="12">
					<a-form-item
						:rules="[{required: contractDecision.contractNo, message: '请输入合同编号'}]"
						label="成交方式/合同编号："
						name="contractNo">
						<a-input-group compact class="display-flex">
							<a-form-item-rest>
								<a-select v-model:value="formData.signType" disabled :options="signTypeList" style="width: 80px" />
							</a-form-item-rest>
							<a-input v-model:value.trim="formData.contractNo" placeholder="请输入合同编号" style="flex: 1" />
						</a-input-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="合同附件：">
						<a-button type="primary" block @click="visibles.attachment = true">
							<check-outlined v-if="attachments?.length" />
							<plus-outlined v-else />
						</a-button>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="补充说明：" name="addExplanation">
						<a-textarea
							v-model:value.trim="formData.addExplanation"
							placeholder="请输入补充说明"
							:rows="4"
							show-count
							:maxlength="200" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>

	<file-upload-dialog v-model:visible="visibles.attachment" :biz-id="props.dataSource.id" v-model:files="attachments" />
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, watch, watchEffect} from 'vue'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {message} from 'ant-design-vue'
	import {signTypeList} from '@/utils'
	import {Img} from 'yuxin-base/src/types'
	import fileApi from 'yuxin-base/src/api/file-api'
	import {CheckOutlined, PlusOutlined} from '@ant-design/icons-vue'
	const props = defineProps<{
		visible: boolean
		dataSource: any
	}>()

	const emits = defineEmits(['update:visible', 'update:files', 'success'])

	const visibles = reactive({
		attachment: false
	})

	const contractDecision = ref({
		contractNo: false
	})

	const attachments = ref<any>([])

	const form = ref()

	const formData = reactive({
		// 成交方式
		signType: 1,
		// 合同编号
		contractNo: null,
		// 合同附件
		attachmentIds: [],
		// 补充说明
		addExplanation: null
	})

	const option = reactive({
		title: '编辑合同信息',
		width: '600px',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
		},
		onOk() {
			updateContractFun()
		}
	})

	/** 获取决策合同设置 */
	const getContractDecision = async () => {
		await settingApi.getDecisionList({bizPoint: 'CONTRACT_FIELD_MUST', module: 'CONTRACT'}).then(res => {
			let source = JSON.parse(res.data[0]?.value || '[]')
			contractDecision.value.contractNo = source.includes(4) ? true : false
		})
	}
	watch(
		() => props.visible,
		() => {
			for (let key in props.dataSource) {
				if (formData.hasOwnProperty(key)) {
					if (props.dataSource[key]) {
						formData[key] = props.dataSource[key]
					}
				}
			}
			getContractDecision()
			attachmentF()
		}
	)

	// 回显合同附件
	const attachmentF = () => {
		fileApi.getFileList(props.dataSource?.id).then(({data}: {data: Img[]}) => {
			attachments.value = data.map(o => {
				o.name = o.fileOriginName
				return o
			})
			formData.attachmentIds = attachments.value.map(o => o.id) as []
		})
	}

	// 保存
	const updateContractFun = () => {
		// if (contractDecision.value.contractNo) {
		// 	return message.warning('合同编号不能为空')
		// }

		form.value?.validate().then(() => {
			settingApi
				.updateContract({
					addExplanation: formData.addExplanation,
					contractNo: formData.contractNo,
					id: props.dataSource?.renterInfo?.contractId
				})
				.then(() => {
					emits('update:visible', false)
					emits('success', false)
				})
		})
	}
</script>

<style scoped></style>
